import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { connect } from '@tarojs/redux'
import dayjs from 'dayjs'

import ListItem from '../../components/listItem'
import { getSaleRecords } from '../../api/partner'
import { ListLoading } from '../../components/loading'

import './index.less'

const mapState = ({ partnerInfo }) => ({
  partnerInfo
})

@connect(mapState)
class BaseInfo extends Taro.Component {
  config = {
    navigationBarTitleText: '合伙人详情'
  }

  state = {
    current: 0,
    isDone: false,
    saleRecords: []
  }

  getSaleRecords = async () => {
    const res = await getSaleRecords({ partnerId: this.props.partnerInfo.id })

    this.setState({
      saleRecords: res.data,
      isDone: true
    })
  }

  handleClick = val => {
    this.setState({
      current: val
    })

    if (!this.state.isDone && val === 2) {
      this.getSaleRecords()
    }
  }

  render() {
    const tabList = [{ title: '基本信息' }, { title: '业绩分析' }, { title: '调货记录' }]
    const { current, saleRecords, isDone } = this.state
    const { partnerInfo } = this.props

    return (
      <View className="page">
        <AtTabs
          current={ current }
          tabList={ tabList }
          onClick={ this.handleClick }
        >
          <AtTabsPane current={ current } index={ 0 }>
            <View className="partner-list">
              <ListItem label="头像" border>
                <View>
                  <Image src={ partnerInfo.imgUrl ? partnerInfo.imgUrl : require('../../assets/images/head_pic.png') } />
                </View>
              </ListItem>
              <ListItem label="姓名" border>
                <Text>{ partnerInfo.name }</Text>
              </ListItem>
              <ListItem label="性别" border>
                <Text>{ partnerInfo.sexStr }</Text>
              </ListItem>
              <ListItem label="手机号">
                <Text>{ partnerInfo.mobile }</Text>
              </ListItem>
            </View>
            <View className="partner-list">
              <ListItem label="合伙人级别" border>
                <Text>{ partnerInfo.levelStr }</Text>
              </ListItem>
              <ListItem label="合伙人编号">
                <Text>{ partnerInfo.number }</Text>
              </ListItem>
            </View>
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 1 }>
            <View className="partner-list">
              <ListItem label="货款余额" border>
                <Text>{ partnerInfo.accountBalance }</Text>
              </ListItem>
              <ListItem label="进货总额" border>
                <Text>{ partnerInfo.goodsAmount }</Text>
              </ListItem>
              <ListItem label="销售总额">
                <Text>{ partnerInfo.totalSales }</Text>
              </ListItem>
            </View>
            <View className="partner-list">
              <ListItem label="注册会员总数" border>
                <Text>{ partnerInfo.memberCount }</Text>
              </ListItem>
              <ListItem label="累计付费会员人数" border>
                <Text>{ partnerInfo.payMemberCount }</Text>
              </ListItem>
              <ListItem label="会员累计成交金额">
                <Text>{ partnerInfo.memberTransactionAmount }</Text>
              </ListItem>
            </View>
          </AtTabsPane>
          <AtTabsPane current={ current } index={ 2 }>
            <View className="dispatch-record">
              {
                saleRecords.map((item, index) => (
                  <View className="item" key={ index }>
                    <View className="date">调货时间：{ dayjs(item.createTime).format('YYYY-MM-DD') }</View>
                    <View className="money-box">
                      <View className="money">
                        <View>调货金额(元)</View>
                        <View>{ item.soldAmount }</View>
                      </View>
                      <View className="money">
                        <View>实收金额(元)</View>
                        <View>{ item.actualAmount }</View>
                      </View>
                    </View>
                  </View>
                ))
              }
            </View>
          </AtTabsPane>
        </AtTabs>
        {
          current === 2
          ?
          <ListLoading isDone={ isDone } data={ saleRecords } />
          :
          null
        }
      </View>
    )
  }
}

export default BaseInfo